<!--
* 开源版本请务必保留此注释头信息，若删除gemframe官方保留所有法律责任追究！
* 本软件受国家版权局知识产权以及国家计算机软件著作权保护（登记号：2018SR503328）
* 不得恶意分享产品源代码、二次转售等，违者必究。
* Copyright (c) 2020 gemframework all rights reserved.
* http://www.gemframework.com
* 版权所有，侵权必究！
-->
<!DOCTYPE html>
<html lang="zh-cn" class="fullscreen-bg" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/links :: common_header(~{::title},~{},~{::style})">
    <title>仪表盘</title>
    <style>
        /** 应用快捷块样式 */
        .console-app-group {
            padding: 16px;
            border-radius: 4px;
            text-align: center;
            background-color: #fff;
            cursor: pointer;
        }

        .console-app-group .console-app-icon {
            width: 32px;
            height: 32px;
            line-height: 32px;
            margin-bottom: 6px;
            display: inline-block;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            font-size: 32px;
            color: #69c0ff;
        }

        .console-app-group:hover {
            box-shadow: 0 0 15px rgba(0, 0, 0, .08);
        }

        /** //应用快捷块样式 */

        /** 小组成员 */
        .console-user-group {
            position: relative;
            padding: 10px 0 10px 60px;
        }

        .console-user-group .console-user-group-head {
            width: 32px;
            height: 32px;
            position: absolute;
            top: 50%;
            left: 12px;
            margin-top: -16px;
        }

        .console-user-group .layui-badge {
            position: absolute;
            top: 50%;
            right: 8px;
            margin-top: -10px;
        }

        .console-user-group .console-user-group-name {
            line-height: 1.2;
        }

        .console-user-group .console-user-group-desc {
            color: #8c8c8c;
            line-height: 1;
            font-size: 12px;
            margin-top: 5px;
        }

        /** 卡片轮播图样式 */
        .admin-carousel .layui-carousel-ind {
            position: absolute;
            top: -41px;
            text-align: right;
        }

        .admin-carousel .layui-carousel-ind ul {
            background: 0 0;
        }

        .admin-carousel .layui-carousel-ind li {
            background-color: #e2e2e2;
        }

        .admin-carousel .layui-carousel-ind li.layui-this {
            background-color: #999;
        }

        /** 广告位轮播图 */
        .admin-news .layui-carousel-ind {
            height: 45px;
        }

        .admin-news a {
            display: block;
            line-height: 60px;
            text-align: center;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid ew-console-wrapper">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    访问量<span class="layui-badge layui-badge-green pull-right">日</span>
                </div>
                <div class="layui-card-body">
                    <p class="lay-big-font">25,848</p>
                    <p>总访问量<span class="pull-right">280 万</span></p>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    销售额<span class="layui-badge layui-badge-blue pull-right">月</span>
                </div>
                <div class="layui-card-body">
                    <p class="lay-big-font"><span style="font-size: 26px;line-height: 1;">¥</span>12,000</p>
                    <p>总销售额<span class="pull-right">68 万</span></p>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    订单量<span class="layui-badge layui-badge-red pull-right">周</span>
                </div>
                <div class="layui-card-body">
                    <p class="lay-big-font">1,680</p>
                    <p>转化率<span class="pull-right">60%</span></p>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    今日新增用户
                    <span class="icon-text pull-right" lay-tips="指标说明" lay-direction="4" lay-offset="5px,5px">
                        <i class="layui-icon layui-icon-tips"></i>
                    </span>
                </div>
                <div class="layui-card-body">
                    <p class="lay-big-font">428 <span style="font-size: 24px;line-height: 1;">位</span></p>
                    <p>总用户<span class="pull-right">100800 人</span></p>
                </div>
            </div>
        </div>
    </div>
    <!-- 快捷方式 -->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6" style="padding-bottom: 0;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-xs6 layui-col-sm3">
                    <div class="console-app-group">
                        <i class="console-app-icon layui-icon layui-icon-group"
                           style="font-size: 26px;padding-top: 3px;margin-right: 6px;"></i>
                        <div class="console-app-name">用户</div>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-sm3">
                    <div class="console-app-group">
                        <i class="console-app-icon layui-icon layui-icon-chart" style="color: #95de64;"></i>
                        <div class="console-app-name">分析</div>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-sm3">
                    <div class="console-app-group">
                        <i class="console-app-icon layui-icon layui-icon-cart" style="color: #ff9c6e;"></i>
                        <div class="console-app-name">商品</div>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-sm3">
                    <div class="console-app-group">
                        <i class="console-app-icon layui-icon layui-icon-form"
                           style="color: #b37feb;font-size: 30px;"></i>
                        <div class="console-app-name">订单</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6" style="padding-bottom: 0;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-xs6 layui-col-sm3">
                    <div class="console-app-group">
                        <i class="console-app-icon layui-icon layui-icon-layer"
                           style="color: #ffd666;font-size: 34px;"></i>
                        <div class="console-app-name">票据</div>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-sm3">
                    <div class="console-app-group">
                        <i class="console-app-icon layui-icon layui-icon-email"
                           style="color: #5cdbd3;font-size: 36px;"></i>
                        <div class="console-app-name">消息</div>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-sm3">
                    <div class="console-app-group">
                        <i class="console-app-icon layui-icon layui-icon-note"
                           style="color: #ff85c0;font-size: 28px;"></i>
                        <div class="console-app-name">标签</div>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-sm3">
                    <div class="console-app-group">
                        <i class="console-app-icon layui-icon layui-icon-slider" style="color: #ffc069;"></i>
                        <div class="console-app-name">配置</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--热门搜索 & 版本信息-->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md4 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">日统计</div>
                <div class="layui-card-body">
                    <div id="tjDivDay" style="height: 360px;"></div>
                    <div style="color: #1AB4E8;font-size: 18px;position: absolute;bottom: 95px;left: 0;right:0;text-align: center;cursor: pointer;">
                        签到明细<i class="layui-icon layui-icon-right" style="font-size: 16px;"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">周统计</div>
                <div class="layui-card-body">
                    <div id="tjDivWeek" style="height: 360px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-lg4 layui-col-md5">
            <div class="layui-card">
                <div class="layui-card-header">版本信息</div>
                <div class="layui-card-body">
                    <table class="layui-table layui-text">
                        <colgroup>
                            <col width="90">
                            <col>
                        </colgroup>
                        <tbody>
                        <tr>
                            <td>当前版本</td>
                            <td>v1.1.5 &emsp; <a href="https://www.kancloud.cn/gemos/gem_coral_dev/1647441" target="_blank">更新日志</a></td>
                        </tr>
                        <tr>
                            <td>基于框架</td>
                            <td>SpringBoot 2.2.1.RELEASE</td>
                        </tr>
                        <tr>
                            <td>主要特色</td>
                            <td>基础能力 / 响应式 / 简约 / 易上手</td>
                        </tr>
                        <tr>
                            <td>源码获取</td>
                            <td>
                                <a href="http://www.gitee.com/gemteam/coral" class="layui-btn layui-btn-danger" target="_blank">获取授权</a>
                                <a href="http://www.gitee.com/gemteam/coral" target="_blank" class="layui-btn">立即下载</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">小组成员</div>
                <div class="layui-card-body">
                    <div class="console-user-group">
                        <img th:src="@{/assets/images/avatar/user3-160x160.jpg}" class="console-user-group-head"/>
                        <div class="console-user-group-name">Gem</div>
                        <div class="console-user-group-desc">资深架构师 / 前端大牛 </div>
                        <span class="layui-badge layui-badge-green">在线</span>
                    </div>
                    <div class="console-user-group">
                        <img th:src="@{/assets/images/avatar/user9-160x160.jpg}" class="console-user-group-head"/>
                        <div class="console-user-group-name">Nine</div>
                        <div class="console-user-group-desc">产品经理 / 高级视觉设计师 / 营销高手</div>
                        <span class="layui-badge layui-badge-red">离线</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 加载动画 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>
<!-- js部分 -->
<div th:replace="common/scripts :: common"></div>
<div th:replace="common/scripts :: echarts"></div>
<script>
    layui.use(['layer', 'carousel', 'table'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var carousel = layui.carousel;
        var table = layui.table;
        var device = layui.device();


        // 渲染日签到图表
        var myCharts1 = echarts.init(document.getElementById('tjDivDay'));
        var options1 = {
            title: {
                x: 'center',
                y: '32%',
                text: '签到人数/应到人数',
                textStyle: {
                    fontSize: 18,
                    color: '#262626',
                    fontWeight: 'normal'
                },
                subtextStyle: {
                    fontSize: 56,
                    color: '#28a6d6'
                },
                itemGap: 20
            },
            color: ['#18B4E7', '#E0E0E0'],
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                right: '0px',
                top: '0px',
                data: ['已签到', '未签到'],
                textStyle: {
                    color: '#595959'
                }
            },
            series: [{
                name: '人数',
                type: 'pie',
                radius: ['75%', '80%'],
                label: {
                    normal: {
                        show: false
                    }
                }
            }]
        };
        myCharts1.setOption(options1);
        // 赋值
        myCharts1.setOption({
            title: {subtext: '38/60'},
            series: [{data: [{name: '已签到', value: 38}, {name: '未签到', value: 22}]}]
        });

        // ------------------------------------------------------------------------
        // 渲染周签到图表
        var myCharts2 = echarts.init(document.getElementById('tjDivWeek'));
        var options2 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#E0E0E0'
                    }
                }
            },
            color: ['#10B4E8', '#FFA800'],
            legend: {
                orient: 'vertical',
                right: '0px',
                top: '0px',
                data: ['已签到', '未签到'],
                textStyle: {
                    color: '#595959'
                }
            },
            grid: {
                top: '75px',
                left: '35px',
                right: '55px',
                bottom: '40px'
            },
            xAxis: {
                name: '星期',
                nameTextStyle: {
                    color: '#595959'
                },
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五'],
                axisLine: {
                    lineStyle: {
                        color: '#E0E0E0'
                    },
                    symbol: ['none', 'arrow'],
                    symbolOffset: [0, 10]
                },
                axisLabel: {
                    color: '#8c8c8c'
                },
                axisTick: {
                    alignWithLabel: true
                }
            },
            yAxis: {
                name: '人数',
                nameTextStyle: {
                    color: '#595959'
                },
                type: 'value',
                boundaryGap: ['0', '20%'],
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#E0E0E0'
                    },
                    symbol: ['none', 'arrow'],
                    symbolOffset: [0, 10]
                },
                axisLabel: {
                    color: '#8c8c8c'
                },
                splitLine: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                minInterval: 1
            },
            series: [
                {
                    name: '已签到',
                    type: 'bar',
                    stack: 'one',
                    barMaxWidth: '30px',
                    label: {
                        normal: {
                            show: true,
                            position: 'inside'
                        }
                    }
                },
                {
                    name: '未签到',
                    type: 'bar',
                    stack: 'one',
                    barMaxWidth: '30px',
                    label: {
                        normal: {
                            show: true,
                            position: 'inside'
                        }
                    }
                }
            ]
        };
        myCharts2.setOption(options2);
        // 赋值
        myCharts2.setOption({
            series: [{data: [5, 9, 6, 3, 10]}, {data: [10, 6, 9, 12, 5]}]
        });
        // 窗口大小改变事件
        window.onresize = function () {
            myCharts1.resize();
            myCharts2.resize();
        };
    });
</script>
</body>
</html>